<!--账号安全-->
<template>
  <div class="security-container">
    <!-- 用户信息 -->
    <el-card class="user-info">
      <template #header>
        <span>账户信息</span>
      </template>
      <div class="avatar">
        <el-avatar :src="user.avatar" size="large"></el-avatar>
      </div>
      <p><strong>用户名：</strong>{{ user.username }}</p>
      <p><strong>邮箱：</strong>{{ user.email }}</p>
      <p><strong>注册时间：</strong>{{ user.registerTime }}</p>
    </el-card>

    <!-- 密码管理 -->
    <el-card class="password-management">
      <template #header>
        <span>密码管理</span>
      </template>
      <el-form 
        :model="passwordForm" 
        :rules="passwordRules" 
        ref="passwordRef"
        label-width="120px"
      >
        <el-form-item label="当前密码" prop="currentPassword">
          <el-input v-model="passwordForm.currentPassword" type="password"></el-input>
        </el-form-item>
        <el-form-item label="新密码" prop="newPassword">
          <el-input v-model="passwordForm.newPassword" type="password"></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="confirmPassword">
          <el-input v-model="passwordForm.confirmPassword" type="password"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="updatePassword">保存修改</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 双因素认证 -->
    <el-card class="two-factor-auth">
      <template #header>
        <span>双因素认证</span>
      </template>
      <div v-if="!isTwoFactorEnabled">
        <p>未启用双因素认证，建议立即开启</p>
        <el-button type="primary" @click="enableTwoFactor">开启认证</el-button>
      </div>
      <div v-else>
        <p>已启用双因素认证</p>
        <el-image :src="qrCodeUrl" style="width: 150px; margin-bottom: 10px;"></el-image>
        <el-input v-model="otpCode" placeholder="请输入验证码"></el-input>
        <el-button type="primary" @click="verifyOtp">验证</el-button>
        <el-button type="danger" @click="disableTwoFactor">关闭认证</el-button>
      </div>
    </el-card>

    <!-- 登录记录 -->
    <el-card class="login-history">
      <template #header>
        <span>最近登录记录</span>
      </template>
      <el-table :data="loginHistory" stripe>
        <el-table-column prop="time" label="时间" width="180"></el-table-column>
        <el-table-column prop="ip" label="IP地址" width="160"></el-table-column>
        <el-table-column prop="device" label="设备类型"></el-table-column>
        <el-table-column prop="location" label="位置"></el-table-column>
        <el-table-column label="操作">
          <template #default="{ row }">
            <el-tag :type="row.status === 'success' ? 'success' : 'danger'">{{ row.status }}</el-tag>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue';
import { ElMessage } from 'element-plus';

const user = {
  avatar: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
  username: 'admin',
  email: 'admin@example.com',
  registerTime: '2023-06-19'
};

const passwordForm = reactive({
  currentPassword: '',
  newPassword: '',
  confirmPassword: ''
});

const passwordRules = {
  currentPassword: [
    { required: true, message: '请输入当前密码', trigger: 'blur' }
  ],
  newPassword: [
    { required: true, message: '请输入新密码', trigger: 'blur' },
    { min: 8, message: '密码至少8位', trigger: 'blur' }
  ],
  confirmPassword: [
    { required: true, message: '请再次输入密码', trigger: 'blur' },
    { validator: (rule, value) => value === passwordForm.newPassword, message: '两次密码不一致', trigger: 'blur' }
  ]
};

const isTwoFactorEnabled = ref(false);
const qrCodeUrl = ref('https://example.com/qrcode.png');
const otpCode = ref('');

const loginHistory = [
  // 填充示例数据
];

// 修改密码
const updatePassword = () => {
  // 表单校验逻辑
  // 数据提交逻辑
  ElMessage.success('密码修改成功');
};

// 启用双因素认证
const enableTwoFactor = () => {
  // 生成二维码逻辑
  isTwoFactorEnabled.value = true;
};

// 验证OTP
const verifyOtp = () => {
  // 验证逻辑
  ElMessage.success('验证成功');
};

// 关闭双因素认证
const disableTwoFactor = () => {
  // 确认对话框
  isTwoFactorEnabled.value = false;
};
</script>

<style scoped>
.security-container {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.el-card {
  margin-bottom: 20px;
}

.user-info .avatar {
  text-align: center;
  margin-bottom: 10px;
}

.password-management,
.two-factor-auth {
  width: 400px;
  max-width: 100%;
}

.login-history {
  flex-grow: 1;
}
</style>